<template>
	<view class="line-box">
		<u-line-progress
			active-color="#2979ff" 
			inactive-color="red"
			:height="20"
			:percent="showPrecent">
			<view></view>
		</u-line-progress>
		<view class="num" v-if="percent < 100">
			<u-count-to
				:start-val="showPercentBefore" 
				:end-val="showPrecent"
				:font-size="16"
				color="#fff"
				duration="500"></u-count-to>%
		</view>
		<view class="num" v-else>
			可领取
		</view>
	</view>
</template>

<script>
export default {
	props: {
		percentBefore: {
			type: Number,
			default: 0,
		},
		percent: {
			type: Number,
			default: 0,
		},
	},
	computed: {
		showPercentBefore() {
			return this.percentBefore % 100;
		},
		showPrecent() {
			return this.percent % 100;
		}
	},
	data() {
		return {
			
		}
	}
}
</script>

<style lang="scss" scoped>
.line-box {
	position: relative;
	width: 30%;
	::v-deep .u-active {
		border-radius: 30rpx;
	}
	.num {
		position: absolute;
		left: 0;
		top: 20rpx;
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 16rpx;
	}
}
</style>